<template>
  <div>
    <!-- 实销审批 -->
    <TopFilter :list="topFilterList" :cols="3" @filterChange="changeHandle" @resetChange="resetChange" @onCollapse="collapseHandle" :labelWidth="110"></TopFilter>

    <FilterTables
      ref="table"
      columnsRef="qjhSalesApproval"
      :columns="columns"
      :fetchapi="fetchApi"
      :params="fetchParams"
      :datakey="'records'"
      :onRowSelectChange="selectChangeHandle"
      :onColumnsChange="columns => (this.columns = columns)"
    >
      <template slot="controls">
        <multiuse-button size="small" type="primary" :disabled="isDisabled" :click="commitHandle.bind(this, 60521003)">审批通过</multiuse-button>
        <multiuse-button size="small" type="primary" :disabled="isDisabled" :click="commitHandle.bind(this, 60521004)">审批驳回</multiuse-button>
      </template>
    </FilterTables>

    <BaseDialog :visible.sync="isDealer" :title="'经销商查询'" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <ownerSeacher :rowData="formData" @close="emitCloseHandler1" />
    </BaseDialog>
    <Drawer :visible.sync="visible" :title="'编辑'" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }" width="72%">
      <childrenModel :rowData="formData" @close="emitCloseHandler" />
    </Drawer>
    <BaseDialog :visible.sync="isreject" :title="'驳回意见'" destroyOnClose :containerStyle="{ height: 'calc(100% - 60px)', overflow: 'auto', paddingBottom: '60px' }">
      <reject :rowData="rejectData" @close="emitCloseHandler" />
    </BaseDialog>
  </div>
</template>
<script>
import { dictionary } from '@/utils/dictMixin';
import { queryList, auditReportDto, getFiAccountType } from '@/api/omSale/ActualSales/SalesApproval';
import ownerSeacher from './ownerSeacher';
import childrenModel from './childrenModel';
import reject from './reject';
import { vehicleConfiguration } from '@/api/omFinance';

export default {
  name: 'SalesApproval',
  mixins: [dictionary],

  data() {
    this.BaseTable = null;
    this.conf = { add: '新增', edit: '编辑', show: '明细' };
    return {
      topFilterList: this.createdFrom(),
      columns: this.createdTable(),
      fetchApi: queryList,
      fetchParams: {
        xhrAbort: true
      },
      formData: {},
      saveData: [],
      rejectData: [],
      visible: false,
      isDealer: false,
      isreject: false,
      isDisabled: true
    };
  },
  components: {
    ownerSeacher,
    childrenModel,
    reject
  },
  mounted() {
    this.BaseTable = this.$refs.table.$refs.pageTable;
  },
  created() {
    this.getList();

    this.getFiAccountType();
  },
  methods: {
    async getList() {
      let res = await vehicleConfiguration(0, { isUnlimited: 10041001 });
      this.topFilterList.find(item => item.fieldName === 'vehicleInfo').itemList = res.data;
    },
    async getFiAccountType() {
      let res = (await getFiAccountType({})).data.map(x => ({ text: x.accountTypeName, value: x.id }));
      this.columns.find(x => x.dataIndex == 'accountType').editItems = res;
      this.columns.find(x => x.dataIndex == 'accountType').filterItems = res;
    },
    selectChangeHandle(row) {
      if (row) {
        this.isDisabled = false;
        this.saveData = row;
        return;
      }
      this.isDisabled = true;
    },
    seacherFun() {
      this.isDealer = true;
    },
    async saveOrCommitHandle(data) {
      let saveData = [];
      data.map(x => {
        let json = {
          id: x.reportId,
          salesCustomerId: x.salesCustomerId,
          checkDesc: x.checkDesc,
          reportStatus: 60521003
        };
        saveData.push(json);
      });

      const res = await auditReportDto(saveData);
      if (res.resultCode == 200) {
        // 重新加载
        if (1 == res.data.code) {
          this.$notify.success({ title: '提示信息', message: '操作成功' });
          this.fetchParams = { ...this.fetchParams };
        } else {
          this.$notify.error({ title: '提示信息', message: '操作失败' });
        }
      }
    },
    async commitHandle(type) {
      if (type == 60521003) {
        await this.$confirm('是否通过?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
          .then(async () => {
            await this.saveOrCommitHandle(this.saveData);
          })
          .catch(() => {});
      }
      if (type == 60521004) {
        this.isreject = true;
        this.rejectData = this.saveData;
      }
    },
    changeHandle(params) {
      this.fetchParams.xhrAbort = false;
      this.fetchParams = Object.assign({}, this.fetchParams, params);
    },
    resetChange(params) {
      this.fetchParams = Object.assign({}, this.fetchParams, params);
    },
    collapseHandle() {
      this.$nextTick(() => {
        this.BaseTable.EXECUTE_RESET_HEIGHT();
      });
    },
    // 编辑
    editHandle(row) {
      this.handleType = 'edit';
      this.formData = row;
      this.showHandler();
    },
    // 明细
    detailHandle(row) {
      this.handleType = 'show';
      this.formData = row;
      this.showHandler();
    },
    showHandler() {
      this.drawerTitle = `${this.conf[this.handleType]}`;
      this.visible = true;
    },
    emitCloseHandler(val, type) {
      this.visible = val;
      this.isreject = val;
      if (type === 'refresh') {
        // 重新加载
        this.fetchParams = { ...this.fetchParams };
      }
    },
    emitCloseHandler1(val, data) {
      this.isDealer = val;
      if (data) {
        let dealerCodes = [];
        data.map(x => {
          dealerCodes.push(x.dealerCode);
        });
        this.topFilterList.find(x => x.fieldName == 'dealerCode').initialValue = dealerCodes.toString();
      }
    },
    createdFrom() {
      return [
        {
          type: 'INPUT',
          label: '经销商代码',
          fieldName: 'dealerCode',
          placeholder: '请选择',
          unitRender: () => {
            return (
              <div>
                <el-button icon="el-icon-search" onClick={() => this.seacherFun()}></el-button>
              </div>
            );
          }
        },
        {
          type: 'INPUT',
          label: '经销商名称',
          fieldName: 'dealerName',
          placeholder: '请输入'
        },
        {
          type: 'TEXT_AREA',
          label: 'VIN',
          fieldName: 'vin',
          placeholder: '请输入',
          maxlength: '',
          maxRows: 2
        },
        {
          type: 'RANGE_DATE',
          label: '上报日期',
          fieldName: 'reportStart|reportEnd',
          placeholder: '请选择',
          initialValue: []
        },
        {
          type: 'INPUT',
          label: '零售订单号',
          fieldName: 'orderNo',
          placeholder: '请输入'
        },
        {
          type: 'INPUT',
          label: '客户名称',
          fieldName: 'customerName',
          placeholder: '请输入'
        },
        {
          type: 'INPUT',
          label: '手机号',
          fieldName: 'customerPhone',
          placeholder: '请输入'
        },
        {
          type: 'SELECT',
          label: '审核状态',
          fieldName: 'reportStatus',
          placeholder: '请选择',
          itemList: [{ text: '已提交', value: 60521002 }]
        },
        {
          type: 'INPUT_CASCADER',
          label: '车型选择',
          fieldName: 'vehicleInfo',
          placeholder: '请选择',
          options: { titles: ['品牌', '车系', '车型', '配置', '选装', '颜色'] },
          itemList: []
        }
      ];
    },
    createdTable() {
      return [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          sorter: true,
          fixed: 'left',
          render: props => {
            return <span>{props.row.index + 1}</span>;
          }
        },
        {
          title: '操作',
          dataIndex: 'column-action',
          width: 50,
          fixed: 'left',
          render: (props, h) => {
            return (
              <div>
                <multiuse-button size="mini" type="text" onClick={() => this.editHandle(props.row)}>
                  编辑
                </multiuse-button>
              </div>
            );
          }
        },
        {
          title: '经销商代码',
          dataIndex: 'dealerCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '经销商名称',
          dataIndex: 'dealerName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '事业部',
          dataIndex: 'deptName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '审批状态',
          dataIndex: 'reportStatus',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('6052'),
          render: props => {
            return <span>{this.createDictText(props.row.reportStatus, '6052')}</span>;
          }
        },
        {
          title: '零售单号',
          dataIndex: 'orderNo',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: []
        },
        {
          title: '客户编码',
          dataIndex: 'customerNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户名称',
          dataIndex: 'customerName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },

        {
          title: '性别',
          dataIndex: 'customerSex',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1002'),
          render: props => {
            return <span>{this.createDictText(props.row.customerSex, '1002')}</span>;
          }
        },
        {
          title: '手机号',
          dataIndex: 'mobile',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '电话',
          dataIndex: 'phone',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '使用人',
          dataIndex: 'userName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '使用人电话',
          dataIndex: 'userPhone',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '身份证号',
          dataIndex: 'cardNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '年龄',
          dataIndex: 'age', // TODO 9407
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('9407'),
          render: props => {
            return <span>{this.createDictText(props.row.age, '9407')}</span>;
          }
        },
        {
          title: '客户级别',
          dataIndex: 'customerLevel',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1519'),
          render: props => {
            return <span>{this.createDictText(props.row.customerLevel, '1519')}</span>;
          }
        },
        {
          title: '学历',
          dataIndex: 'education',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('4049'),
          render: props => {
            return <span>{this.createDictText(props.row.education, '4049')}</span>;
          }
        },
        {
          title: '户口类型',
          dataIndex: 'residenceType',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('7062'),
          render: props => {
            return <span>{this.createDictText(props.row.residenceType, '7062')}</span>;
          }
        },
        {
          title: '职业',
          dataIndex: 'occupation',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1527'),
          render: props => {
            return <span>{this.createDictText(props.row.occupation, '1527')}</span>;
          }
        },
        {
          title: '邮编',
          dataIndex: 'zipCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '地址',
          dataIndex: 'linkAddress',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车辆形式',
          dataIndex: 'powerType', // TODO 4502
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('6008'),
          render: props => {
            return <span>{this.createDictText(props.row.powerType, '6008')}</span>;
          }
        },
        {
          title: 'VIN',
          dataIndex: 'vin',
          align: 'center',
          width: 180,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '公告号',
          dataIndex: 'noticeNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车系名称',
          dataIndex: 'seriesName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '车型名称',
          dataIndex: 'modelName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '配置名称',
          dataIndex: 'packageName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '选装名称',
          dataIndex: 'optionName',
          align: 'center',
          width: 250,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '内饰',
          dataIndex: 'trimColorName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '颜色',
          dataIndex: 'colorName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '产品代码',
          dataIndex: 'productCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '产品名称',
          dataIndex: 'productName',
          align: 'center',
          width: 400,
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '订单类型',
          dataIndex: 'orderType',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('6026'),
          render: props => {
            return <span>{this.createDictText(props.row.orderType, '6026')}</span>;
          }
        },
        {
          title: '车牌号',
          dataIndex: 'plateNumber',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '派发来源',
          dataIndex: 'orderSource',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('6042'),
          render: props => {
            return <span>{this.createDictText(props.row.orderSource, '6042')}</span>;
          }
        },

        {
          title: '销售顾问',
          dataIndex: 'salesManName',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '客户类型',
          dataIndex: 'customerType',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1523'),
          render: props => {
            return <span>{this.createDictText(props.row.customerType, '1523')}</span>;
          }
        },
        {
          title: '省份',
          dataIndex: 'provinceId',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createRegionsList(),
          render: p => {
            let arr = this.createRegionsList();
            let str = '';
            arr.map(x => {
              if (x.value == p.row.provinceId) {
                str = x.text;
              }
            });
            return <span>{str}</span>;
          }
        },
        {
          title: '城市',
          dataIndex: 'cityId',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: p => {
            let arr = this.createcityList(p.row.provinceId);
            let str = '';
            arr.map(x => {
              if (x.value == p.row.cityId) {
                str = x.text;
              }
            });
            return <span>{str}</span>;
          }
        },
        {
          title: '县区',
          dataIndex: 'districtId',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: p => {
            let arr = this.district(p.row.cityId);
            let str = '';
            arr.map(x => {
              if (x.value == p.row.districtId) {
                str = x.text;
              }
            });
            return <span>{str}</span>;
          }
        },
        {
          title: '实销建档日期',
          dataIndex: 'reportCreateDate',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '首次上报日期',
          dataIndex: 'firstReportDate',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '上报日期',
          dataIndex: 'reportDate',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '生产日期',
          dataIndex: 'productDate',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '出库日期',
          dataIndex: 'stockOutData',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '入库日期',
          dataIndex: 'stockInDate',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '开票日期',
          dataIndex: 'invoiceDate',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '发票号',
          dataIndex: 'invoiceNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '交车日期',
          dataIndex: 'deliveryDate',
          sorter: true,
          filter: true,
          filterType: 'date-range'
        },
        {
          title: '市场指导价',
          dataIndex: 'basicPrice',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '发动机',
          dataIndex: 'engineNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '电机号',
          dataIndex: 'motorCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '电池号',
          dataIndex: 'batteryNo',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '支付方式',
          dataIndex: 'payType',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('6015'),
          render: props => {
            return <span>{this.createDictText(props.row.payType, '6015')}</span>;
          }
        },
        {
          title: '金融机构',
          dataIndex: 'financialInstitution',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('9602'),
          render: props => {
            return <span>{this.createDictText(props.row.financialInstitution, '9602')}</span>;
          }
        },
        {
          title: '期数',
          dataIndex: 'periodsNumber',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('6061'),
          render: props => {
            return <span>{this.createDictText(props.row.periodsNumber, '6061')}</span>;
          }
        },
        {
          title: '上牌省份',
          dataIndex: 'plateProvince',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createRegionsList(),
          render: p => {
            let arr = this.createRegionsList();
            let str = '';
            arr.map(x => {
              if (x.value == p.row.plateProvince) {
                str = x.text;
              }
            });
            return <span>{str}</span>;
          }
        },
        {
          title: '上牌城市',
          dataIndex: 'plateCity',
          sorter: true,
          filter: true,
          filterType: 'input',
          render: p => {
            let arr = this.createcityList(p.row.plateProvince);
            let str = '';
            arr.map(x => {
              if (x.value == p.row.plateCity) {
                str = x.text;
              }
            });
            return <span>{str}</span>;
          }
        },
        {
          title: '车辆性质',
          dataIndex: 'vehicleType',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('4103'),
          render: props => {
            return <span>{this.createDictText(props.row.vehicleType, '4103')}</span>;
          }
        },
        // {
        //   title: '大客户订单',
        //   dataIndex: 'isBigCustomerOrder',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('1004'),
        //   render: props => {
        //     return <span>{this.createDictText(props.row.isBigCustomerOrder, '1004')}</span>;
        //   }
        // },
        // {
        //   title: '特殊订单',
        //   dataIndex: 'isSpecial',
        //   sorter: true,
        //   filter: true,
        //   filterType: 'checkbox',
        //   filterItems: this.createDictList('1004'),
        //   render: props => {
        //     return <span>{this.createDictText(props.row.isSpecial, '1004')}</span>;
        //   }
        // },
        {
          title: '是否三方车辆',
          dataIndex: 'isTripartite',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: this.createDictList('1004'),
          render: props => {
            return <span>{this.createDictText(props.row.isTripartite, '1004')}</span>;
          }
        },
        {
          title: '资金类型',
          dataIndex: 'accountType',
          sorter: true,
          filter: true,
          filterType: 'checkbox',
          filterItems: [],
          editType: 'select',
          editItems: []
        },
        {
          title: '下线工厂',
          dataIndex: 'warehouseCodeFactory',
          sorter: true,
          filter: true,
          filterType: 'input'
        },
        {
          title: '仓库',
          dataIndex: 'warehouseCode',
          sorter: true,
          filter: true,
          filterType: 'input'
        }
      ];
    }
  }
};
</script>
